<template>
  <ul>
    <router-link
      :to="`/detail/${item.id}`"
      tag="li"
      v-for="item in imgitem"
      :key="item.id"
      :class="{active:imgitem.length>3}"
    >
      <!-- <li v-for="item in likeInfo" :key="item.id"> -->
      <img :src="item.image" />
      <div class="van-ellipsis">{{ item.store_name }}</div>
      <h3 style="color: var(--cy-Color)">￥{{ item.price }}</h3>
      <!-- </li> -->
    </router-link>
  </ul>
</template>
<script>
export default {
  name: "ImgItem",
  props: {
    imgitem: {
      type: Array,
      default: function () {
        return [];
      },
      id: [String, Number],
    },
  },
};
</script>
<style scoped lang="less">
li {
  width: 30%;
  font-size: 14px;
  padding:5px;
  margin: 3px;
  img {
    width: 100%;
    border-radius: 5px;
    height: 20vh;
  }
  div {
    padding: 5px 0;
    font-size: 13px;
    color: #333;
  }
  h3 {
    font-size: 16px;
    font-weight: bold;
  }
}
.active{
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
</style>